<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>manageUser</title>
	
	<style>
		body {
		  padding-top: 3.5rem;
		}
		img {
			width:100px;
			height:100px;
		}
	</style>
	
    <!-- Bootstrap core CSS -->
    <link href="styles/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
		  <ol class="breadcrumb">
			<li class="breadcrumb-item active" aria-current="page">管理用户</li>
		  </ol>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="用户名" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="button" onclick="">Search</button>
		  <button class="btn btn-outline-success my-2 my-sm-0 mx-1" type="button" data-toggle="modal" data-target="#addUserModel">Add</button>
        </form>
      </div>
    </nav>

    <main role="main" class="mt-5">
      <div class="container-fluid" style="text-align:center">
        <table class="table table-bordered table-hover">
		  <thead class="thead-dark">
			<tr>
			  <th scope="col">序号</th>
			  <th scope="col">用户名</th>
			  <th scope="col">密码</th>
			  <th scope="col">等级</th>
			  <th scope="col">新增日期</th>
			  <th scope="col">新增人员</th>
			  <th scope="col">操作</th>
			</tr>
		  </thead>
		  <tbody id="userBody">
			
		  </tbody>
		</table>
        <hr>
      </div> <!-- /container -->
    </main>
	
	<!-- model -->
	<div class="modal fade" id="addUserModel" tabindex="-1" role="dialog" aria-labelledby="addUserModelTitle" aria-hidden="true">
	  <div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<h5 class="modal-title" id="addUserModelTitle">新增用户</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			  <span aria-hidden="true">&times;</span>
			</button>
		  </div>
		  <div class="modal-body" style="text-align:center">
			<img src="img/a328db5989f660a40860716ec1c07aee.jpg" class="rounded-circle border border-primary" style="width:100px;height:100px">
			<div class="form-row my-4">
			  <h4 for="username" class="col-sm-3 col-form-h4">用户名：</h4>
			  <div class="col-sm-8">
			    <input type="text" class="form-control" id="username" name="username">
			  </div>
		    </div>
			<div class="form-row my-4">
			  <h4 for="password" class="col-sm-3 col-form-h4">密码：</h4>
			  <div class="col-sm-8">
			    <input type="text" class="form-control" id="password" name="password">
			  </div>
		    </div>
			<div class="form-row my-4">
			  <h4 for="level" class="col-sm-3 col-form-h4">等级：</h4>
			  <div class="col-sm-8">
			    <select id="level" name="level" class="form-control">
				  <option selected>0</option>
				  <option>1</option>
				  <option>...</option>
			    </select>
			  </div>
		    </div>
		  </div>
		  <div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			<button type="button" class="btn btn-primary" onclick="">Add</button>
		  </div>
		</div>
	  </div>
	</div>

    <footer class="container">
      <p>&copy; Company 电子支付</p>
    </footer>

    <script type="text/javascript" src="js/jquery-slim.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/login.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/cookie_util.js"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
    <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript">
    	var userTemplate = '<tr><th scope="row">[rowNo]</th>'+
    		'<td>[userName]</td>'+
    		'<td><input type="text" class="form-control" style="border:0px;text-align:center" value="[password]"></td>'+
    		'<td>[level]</td><td>[registDate]</td><td>[registUser]</td<td>'+
    			'<button class="btn btn-outline-success my-2 my-sm-0 mx-2" type="button" onclick="">更新</button>'+
    			'<button class="btn btn-outline-danger my-2 my-sm-0 mx-2" type="button" onclick="">删除</button>'+
    		'</td></tr>';
    	var userList;
    	$(function(){
    		loadUserMess();
    	});
    	
    	function loadUserMess(){
    		userList = localStorage.getItem("userList");
			//将取出来的json字符串转换为json对象
    		userList = JSON.parse(userList);
    		for(var i = 1 ; i <= userList.length ; i++){
    			
    			var userName = userList[i].userName;
    			var password = userList[i].password;
    			var level = userList[i].level;
    			var registDate = userList[i].registDate;
    			var registUser = userList[i].registUser;
    			
    			var div = userTemplate.replace('[rowNo]',i)
									  .replace('[userName]',userName)
									  .replace('[password]',password)
									  .replace('[level]',departmentId)
									  .replace('[registDate]',registDate)
									  .replace('[registUser]',registUser);
				$("#userBody").prepend(div);
    		}
    	}
    	
    	function addUser(){
    		
    	}
    	
		function updateUser(){
    		
    	}
    	
		function deleteUser(){
			
		}
    </script>
  </body>
</html>
